import React, {Component} from 'react';
import {
    Text,
    FlatList,
    RefreshControl,
    View,
    StyleSheet,
    Image,
    ActionSheetIOS,
    AlertIOS,
    InteractionManager,
    TouchableOpacity,
    NativeModules
} from 'react-native';
import moment from 'moment';
import LmmImageView from '../../component/LmmImageView';

class ProductListItem extends Component {

    render() {
        const product = this.props.product;
        let imgU = product.goodsThumb;

        const imageUri = {
            uri: imgU,
            width: 80,
            height: 100
        };

        let applydate = moment.unix(product.addTime / 1000).format("YYYY/MM/DD");

        let title = product.goodsName;
        let adddate = '添加时间:' + applydate;
        let price = '零售价:' + (product.shopPrice / 100).toFixed(2);
        // let nowprice = '批发价:' + (product.tradePrice / 100).toFixed(2);
        let nowprice = '';
        let productid = product.goodsId;
        let hasAduited = product.hasAduited;//审核状态

        let productstate = '';
        if (this.props.productstate == '1') {
            productstate = '下架';
        } else if (this.props.productstate == '0') {
            productstate = '上架';
        } else {
            if (hasAduited == '-2') {
                productstate = '已退回'
            } else if (hasAduited == '-1') {
                productstate = '待提交'
            } else if (hasAduited == '0') {
                productstate = '待审核'
            } else if (hasAduited == '1') {
                productstate = '审核通过'
            }
        }

        let detail = <View
            style={{
                flexDirection: 'row',
                marginLeft: 20,
                marginRight: 20
            }}>
            <LmmImageView
                source={imageUri}
                style={{
                    width: 80,
                    height: 100
                }}/>
            <View
                style={{
                    flex: 1,
                    flexDirection: 'column',
                    marginLeft: 10,
                    justifyContent: 'space-between',
                    paddingTop: 5,
                    paddingBottom: 5
                }}>
                <Text
                    style={{
                        fontSize: 18
                    }}>
                    {title}
                </Text>
                <Text
                    style={{
                        fontSize: 15,
                        marginTop: 5
                    }}>{adddate}</Text>
                <View
                    style={{
                        marginTop: 5,
                        flexDirection: 'row',
                        justifyContent: 'space-between'
                    }}>
                    <Text
                        style={{
                            fontSize: 15
                        }}>{price}</Text>
                    <Text
                        style={{
                            fontSize: 15
                        }}>{nowprice}</Text>
                </View>
            </View>
        </View>

        let stateBtn = <TouchableOpacity onPress={() => this.props.onProductAction(productstate, productid)}>
            <View style={custstyles.changebtn}>
                <Text
                    style={{
                        color: '#1a9b3b'
                    }}>
                    {productstate}
                </Text>
            </View>
        </TouchableOpacity>;

        if (this.props.productstate == '2') {
            stateBtn = <View style={{flexDirection: 'row', flex: 1, paddingLeft: 20}}>
                <Text>{productstate}</Text></View>
        } else {
            if (this.props.productstate == '3') {
                stateBtn = <View style={{flexDirection: 'row', flex: 1, paddingLeft: 20}}>
                    <Text>{productstate}</Text></View>
            }
            detail = <TouchableOpacity onPress={() => {
                this.props.onPress()
            }}>
                {detail}
            </TouchableOpacity>
        }

        let bottom = <View
            style={{
                flexDirection: 'row',
                justifyContent: 'flex-end',
                alignItems: 'center',
                marginTop: 5,
                paddingRight: 20
            }}>
            {stateBtn}
            <TouchableOpacity onPress={() => this.props.delProduct(productid)}>
                <View style={custstyles.delbtn}>
                    <Text
                        style={{
                            color: 'red'
                        }}>删除</Text>
                </View>
            </TouchableOpacity>
        </View>

        return (
            <View
                style={{
                    flex: 1,
                    backgroundColor: 'white',
                    flexDirection: 'column',
                    paddingTop: 10,
                    paddingBottom: 10
                }}>
                {detail}
                <View style={{
                    height: 1,
                    backgroundColor: '#eee',
                    marginTop: 5,
                    marginHorizontal: 5,
                }
                }/>
                {bottom}
            </View>
        );
    }
}

const custstyles = StyleSheet.create({
    delbtn: {
        alignItems: 'center',
        justifyContent: 'center',
        width: 60,
        height: 30,
        backgroundColor: 'white',
        borderRadius: 5,
        borderColor: 'red',
        borderWidth: 2,
    },
    changebtn: {
        marginRight: 10,
        alignItems: 'center',
        justifyContent: 'center',
        width: 60,
        height: 30,
        backgroundColor: 'white',
        borderRadius: 5,
        borderColor: '#1a9b3b',
        borderWidth: 2
    }
});

export default ProductListItem;